<template>
    <div class="app-container">
        <el-row>
            <el-card shadow="never">
                <el-row type="flex" justify="end" align="middle">
                    <el-col :span="12">
                        <el-form inline>
                            <el-form-item label="车牌号:">
                                {{vehicleInfo.plateNo}}
                            </el-form-item>
<!--                            <el-form-item label="驾驶员姓名:">-->
<!--                                张三-->
<!--                            </el-form-item>-->
<!--                            <el-form-item label="联系电话:">-->
<!--                                13345678909-->
<!--                            </el-form-item>-->
                            <el-form-item label="状态:">
                                {{vehicleInfo.onlineStatus === 'ONLINE' ? '在线' : '离线'}}
                            </el-form-item>
                        </el-form>
                    </el-col>

                    <el-col :span="12">
                        <el-row type="flex" justify="end" align="middle">
                            <el-button @click="changeVideo(0)" :type="playerIndex === 0 ? 'primary' : ''">1</el-button>
                            <el-button @click="changeVideo(1)" :type="playerIndex === 1 ? 'primary' : ''">4</el-button>
                            <el-button @click="changeVideo(2)" :type="playerIndex === 2 ? 'primary' : ''">6</el-button>
                            <el-button @click="playOrStop">{{nextPlayStatus === 'stop' ? '暂停' : '播放'}}</el-button>
                        </el-row>
                    </el-col>

                </el-row>
            </el-card>
        </el-row>

        <el-row style="margin-top: 10px">
            <el-card shadow="never">
                <div v-show="playerIndex === 0"><!--只显示一个视屏-->
                    <video id="videoPlayer0" controls  class="video-js video-player" muted ></video>
                </div>

                <div v-show="playerIndex === 1"> <!--显示4个视屏-->
                    <el-row>
                        <el-col :span="12">
                            <video id="videoPlayer1" controls class="video-js video-player-double" muted></video>
                        </el-col>
                        <el-col :span="12">
                            <video id="videoPlayer2" controls class="video-js video-player-double" muted></video>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <video id="videoPlayer3" controls class="video-js video-player-double" muted></video>
                        </el-col>
                        <el-col :span="12">
                            <video id="videoPlayer4" controls class="video-js video-player-double" muted></video>
                        </el-col>
                    </el-row>
                </div>

                <div v-show="playerIndex === 2"><!--显示6个视屏-->
                    <el-row>
                        <el-col :span="16">
                            <video id="videoPlayer5" controls class="video-js video-player-big" muted></video>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <video id="videoPlayer6" controls class="video-js video-player-small" muted></video>
                            </el-row>
                            <el-row>
                                <video id="videoPlayer7" controls class="video-js video-player-small" muted></video>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <video id="videoPlayer8" controls class="video-js video-player-small" muted></video>
                        </el-col>
                        <el-col :span="8">
                            <video id="videoPlayer9" controls class="video-js video-player-small" muted></video>
                        </el-col>
                        <el-col :span="8">
                            <video id="videoPlayer10" controls class="video-js video-player-small" muted></video>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-row>
    </div>
</template>

<script>
import {cameraPlay, cameraPlayMock, cameraStopPlayMock} from '../../api/camera'
import 'video.js/dist/video-js.css'
import Videojs  from 'video.js'
import 'videojs-flash'
import flvjs from 'flv.js'
export default {
    name:'videoMonitoring',
    props:{
        vehicleInfo:{},
    },
    data(){
        return{
            // vehicleInfo:null,
            channelNo:1,
            playInfoList:[],
            vehicleNo:null,
            channelNoSet:[],//通道set
            playerIndex:0,//播放按钮，共三个：1,2,3
            myPlyers:[],
            nextPlayStatus:'play' //暂停或播放
        }
    },

    methods:{
        initVideo(){//初始化
            this.changeVideo(0)
        },

        changeVideo(index){
            const lastIndex = this.playerIndex
            this.stopAll(index === lastIndex)
            this.playerIndex = index
            const channelNoSetList = [[1],[1,2,3,4],[1,2,3,4,5,6]]
            this.channelNoSet = channelNoSetList[index]
            this.startPlayVideo(index)//播放视屏
        },

        startPlayVideo(index){//播放视屏
            console.log("play index",index)
            const param = {
                // vehicleNo:this.vehicleInfo.plateNo,
                tBoxNo:this.vehicleInfo.tBoxNo,
                channelNoSet:this.channelNoSet
            }
            cameraPlayMock(param).then(response => {
                console.log(response)
                if(response.data.data.rows){
                    this.playInfoList = response.data.data.rows
                    const initFn = [this.initVideo0,this.initVideo1,this.initVideo2]
                    initFn[index]()
                }
            })
        },

        initVideo0(){//点击按钮1,只播放通道1视频
            const ids = ['videoPlayer0']
            const plays = []
            for(let i = 0 ;i < ids.length ; i++){
                console.log("initVideo0 ==>",ids[i])
                const id = ids[i]
                const playUrl = this.playInfoList[i].playUrl
                let player
                if (this.myPlyers[0] && this.myPlyers[0][i]._mediaDataSource.url === playUrl){
                    player = this.myPlyers[0][i]
                }else {
                    player = this.getFlvPlayer(id,playUrl)
                }
                plays.push(player)
            }
            this.myPlyers[0] = plays
        },
        getFlvPlayer(id,url){
            let  flvPlayer
            if (flvjs.isSupported()) {
                const videoElement = document.getElementById(id);
                flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url:url,//'http://img.ksbbs.com/asset/Mon_1704/15868902d399b87.flv'
                });
                console.log("新建player :",id," => ",flvPlayer,flvPlayer._mediaDataSource.url)
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
                // flvPlayer.play();
            }
            return flvPlayer
        },

        testFlvJs(){
            let  flvPlayer
            if (flvjs.isSupported()) {
                let videoElement = document.getElementById('videoPlayer0');
                flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    hasAudio: false,
                    // url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
                    url: 'http://115.29.64.4:3333/video/014420210112-1'
                });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
                // flvPlayer.play();
            }
        },

        initVideo1(){
            const ids = ['videoPlayer1','videoPlayer2','videoPlayer3','videoPlayer4']
            const plays = []
            for(let i = 0 ;i < ids.length ; i++){
                console.log("initVideo1 ==>",ids[i])
                const id = ids[i]
                const  playUrl = this.playInfoList[i].playUrl
                let player
                if (this.myPlyers[1] && this.myPlyers[1][i]._mediaDataSource.url === playUrl){
                    player = this.myPlyers[1][i]
                }else {
                    player = this.getFlvPlayer(id,playUrl)
                }
                plays.push(player)
            }
            this.myPlyers[1] = plays
        },

        initVideo2(){
            const ids = ['videoPlayer5','videoPlayer6','videoPlayer7','videoPlayer8','videoPlayer9','videoPlayer10']
            const plays = []
            for(let i = 0 ;i < ids.length ; i++){
                console.log("initVideo2 ==>",ids[i],this.playInfoList[i])
                const id = ids[i]
                const  playUrl = this.playInfoList[i].playUrl
                let player
                if (this.myPlyers[2] && this.myPlyers[2][i]._mediaDataSource.url === playUrl){
                    player = this.myPlyers[2][i]
                }else {
                    player = this.getFlvPlayer(id,playUrl)
                }
                plays.push(player)
            }
            this.myPlyers[2] = plays
        },

        getOption(){
            return{
                autoplay: false, // 设置自动播放
                controls: true, // 显示播放的控件
                preload: 'auto'
                // sources: [
                //     // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
                //     {
                //         src: 'http://live.ynbit.com/hls/yx-1/index.m3u8',
                //         // src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp',
                //         type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
                //         // type: 'rtmp/flv'
                //     }
                // ]
            }
        },

        setVehicleInfo(info){
            this.vehicleInfo = info
        },

        stopPlay(){
            const  arr = this.channelNoSet
            if (!arr){
                return
            }
            arr.forEach((item,index) => {
                setTimeout(()=>{
                    const param = {
                        channelNo:item,
                        tBoxNo:this.vehicleInfo.tBoxNo,
                    }
                    cameraStopPlayMock(param).then(response => {
                        console.log('stop Play Video',item,response)
                    }).catch(error => {
                        console.log(error)
                    })
                },10 * index)
            })
        },

        playOrStop(){//点击播放按钮
            const status = this.nextPlayStatus
            if (status === 'stop'){
                this.pauseAll(false)
            }else if (status === 'play'){
                this.playAll(false)
            }
        },

        playAll(isChangeIndex){//播放
            if (this.myPlyers.length === 0){
                return
            }
            const  players = this.myPlyers[this.playerIndex]
            if(Array.isArray(players)) {
                for (let player of players) {
                    player.play()
                }
            }
            if (!isChangeIndex){
                this.nextPlayStatus = 'stop'
            }else {
                this.nextPlayStatus = 'play'
            }
        },

        pauseAll(isChangeIndex){
            if (this.myPlyers.length === 0){
                return
            }
            const  players = this.myPlyers[this.playerIndex]
            if(Array.isArray(players)){
                for (let player of players){
                    player.pause()
                }
            }
            if (!isChangeIndex){
                this.nextPlayStatus = 'play'
            }else {
                this.nextPlayStatus = 'stop'
            }
        },

        stopAll(isChangeIndex){//停止播放
            if (this.myPlyers.length === 0){
                return
            }
            const  players = this.myPlyers[this.playerIndex]
            if(Array.isArray(players)){
                for (let player of players){
                    player.pause()
                }
            }

            if (!isChangeIndex){
                this.nextPlayStatus = 'play'
            }else {
                this.nextPlayStatus = 'stop'
            }
            this.stopPlay()

        },
    },

    mounted () {
        this.changeVideo(0)
        //  this.testFlvJs()
        console.log('vehicleInfo',this.vehicleInfo)
    },
    created () {

    },
}
</script>

<style scoped>

.el-form-item{
    margin-top: 10px;
    margin-bottom: 10px;
}

.video-player {
    width: 100%;
    height: 80vh;
}

.video-player-double{
    width: 100%;
    height: 40vh;
}

.video-player-big{
    width: 100%;
    height:54vh ;
}

.video-player-small{
    width: 100%;
    height:27vh ;
}


/deep/ .el-card__body{
    padding: 10px 20px;
}
</style>
